<template>
  <div class="navAll">
    <div class="position">
      <p><i class="fas fa-map-marker-alt" />&nbsp;沈阳市规划大厦&nbsp;<i class="fa fa-caret-down"/></p>
    </div>
    <div class="search">
      <p><i class="fas fa-search">&nbsp;</i>搜索饿了么商家、商店名称</p>
    </div>
  </div>
  <Type></Type>
  <Ads></Ads>
  <Super></Super>
  <div class="recommend">
    <p></p>
    <span>推荐商家</span>
    <p></p>
  </div>
  <Select :Types="recommendTypes"></Select>
  <div class="more">
    <ul>
      <li v-for="(shop, index) in this.shops" :key="index">
        <img :src="`http://121.199.173.91/assets/images/${shop.photo}`" alt="">
        <div class="shopAll">
          <div class="topAll">
            <p class="shopName">{{shop.name}}</p>
            <p class="shopIcon">&#8226;</p>
          </div>
          <div class="topAll">
            <p class="shopSale">
              <i class="fas fa-star" />
              <i class="fas fa-star" />
              <i class="fas fa-star" />
              <i class="fas fa-star" />
              <i class="fas fa-star" />
              4.9&nbsp;月售345单
            </p>
            <p class="deliveryWay">蜂鸟配送</p>
          </div>
          <div class="topAll">
            <p class="shopDistribution">￥15起送|￥3配送</p>
            <p class="shopDistance">3.22km|30分钟</p>
          </div>
          <div class="bottomAll">
            <p class="shopBrief">{{shop.description}}</p>
            <div class="shopNew">
              <p><span>新</span>饿了么新用户首单立减9元</p>
              <p class="shopActivity">2个活动<i class="fa fa-caret-down"/></p>
            </div>
            <p class="shopGratia"><span>特</span>特价商品5元起</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <bottom-nav></bottom-nav>
</template>

<script>
import "../../fontawesome-free-6-web/css/all.css"
import Type from "@/components/Type.vue";
import Ads from "@/components/Ads.vue";
import Super from "@/components/Super.vue";
import Select from "@/components/Select.vue";
import BottomNav from "@/components/BottomNav.vue";
import request from "@/request";

export default {
  name:"HomeView",
  components:{
    Type,
    Ads,
    Super,
    Select,
    BottomNav
  },
  data() {
    return {
      recommendTypes:[
          "综合排序",
          "距离最近",
          "销量最高",
          "筛选"
      ],
      shops:[],
    }
  },
  methods:{
    loadShopInfo(){
      request({
        method:"get",
        url:"shop-service/shop/getAllShopInfo",
      }).then((respData) => {
        if(respData.code == 200){
          this.shops = respData.data;
        }else{
          console.log(respData.msg);
        }
      }).catch((error) => {
        console.error(error)
      })
    }
  },
  created(){
    this.loadShopInfo();
  }
}
</script>

<style>
img{
  /* 取消图片拖动 */
  -webkit-user-drag: none;
}
p,span{
  /* 取消文本选中 */
  user-select: none;
}
.navAll{
  width: 100%;
  height: 25vw;
  background-color: #0097FF;
}
.navAll .position{
  color: white;
  font-size: 4.5vw;
  font-weight: bold;
  padding: 4vw;
}
.navAll .search{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.navAll .search p{
  width: 90vw;
  height: 9vw;
  background-color: white;
  line-height: 9vw;
  text-align: center;
  border-radius: 2px;
  color: gray;
  font-size: 3vw;
}
.recommend{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recommend span{
  margin: 5vw;
  font-size: 3.5vw;
}
.recommend p{
  width: 6vw;
  height: 1px;
  background-color: gray;
}
.more p{
  font-size: 3vw;
  color: gray;
}
.more ul{
  width: 100%;
  margin-bottom: 13vw;
}
.more li{
  box-sizing: border-box;
  width: 100%;
  padding: 2.5vw;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #EEEEEE;
}
.more img{
  width: 18vw;
  height: 18vw;
}
.shopAll p{
  margin: 1vw 1vw 1vw 2vw;
}
.shopAll{
  width: 100%;
}
.topAll{
  display: flex;
  justify-content: space-between;
}
.topAll .shopName{
  font-size: 4vw;
  font-weight: bold;
  color: black;
}
.topAll .shopIcon{
  width: 1.6vw;
  height: 3.5vw;
  font-size: 3vw;
  background-color: #666666;
  color: white;
}
.topAll .shopSale i{
  color: #FEC80E;
}
.topAll .deliveryWay{
  padding: 0.5vw;
  font-size: 3vw;
  border-radius: 2px;
  color: white;
  background-color: #0097FF;
}
.bottomAll span{
  margin-right: 2vw;
  color: white;
  padding: 0.5vw;
  border-radius: 2px;
}
.bottomAll .shopNew{
  display: flex;
  justify-content: space-between;
}
.bottomAll .shopNew .shopActivity i{
  margin-left: 2vw;
}
.bottomAll .shopNew span{
  background-color: #70BC46;
}
.bottomAll .shopGratia span{
  background-color: #F1884F;
}
</style>